<template>
  <div class="bg">

    <van-sidebar v-model="activeKey" class="tab" @change="scroll">
      <van-sidebar-item :title="item.type_name" v-for="(item,index) in list" :key="index" />

    </van-sidebar>
    <div class="content">
      <div class="box" v-for="(item,index) in list" :key="index">
        <h3>{{item.type_name}}</h3>
        <div class="detail" v-for="(ele) in item.service" :key="ele.service_id" @click="jump(ele)">
          <div class="img">
            <van-image :src="`${resourceURL}${ele.top_pic}`" fit="cover" />
          </div>
          <div class="right">
            <p>{{ele.service_name}}</p>
            <div class="distance">距离&lt;{{ele.distance}}公里</div>
            <div class="bottom">
              <div class="num">销售:<span style="margin-left:5px">{{ele.all_num}}</span></div>
              <div class="price">￥{{ele.sale_price}}</div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
export default {
  name: '',
  components: {

  },
  mixins: [],
  props: {

  },
  data () {
    return {
      activeKey: 0,
      list: [],
      topList: [],
      selectList: [],
      previous: 0,
      tabTopList: []
    }
  },
  computed: {

  },
  watch: {

  },
  mounted () {

    window.document.addEventListener("scroll", this.handleScroll, true);
    let tab = document.querySelector('.tab')
    let timer = setTimeout(() => {
      console.log(tab.clientHeight);
      if (tab.clientHeight > window.innerHeight - document.querySelector('.tabbar').clientHeight) {
        tab.style.height = window.innerHeight - document.querySelector('.tabbar').clientHeight + 'px'
      }


      clearTimeout(timer)


    }, 0);
  },
  created () {
    this.servicelist()
  },
  methods: {

    //获取列表
    servicelist () {
      let location = JSON.parse(localStorage.getItem('location'))
      let lon = location?.longitude || 98
      let lat = location?.latitude || 98
      this.$axios
        .get(this.$api.servicelist, {
          params: {
            lon,
            lat
          }
        })
        .then((res) => {

          this.list = this.list.concat(res.data.data)

          let timer = setTimeout(() => {
            let list = document.querySelectorAll(".box")
            list.forEach(ele => {

              this.topList.push(ele.offsetTop)
            });

            clearTimeout(timer)
          }, 0);
        });
    },
    //
    scroll (index) {


      let timer = setTimeout(() => {

        if (this.topList[index] + window.innerHeight > document.documentElement.scrollHeight) {
          document.documentElement.scrollTop = document.documentElement.scrollHeight;

        } else {
          document.querySelectorAll('.box')[index].scrollIntoView(true)
        }

        clearTimeout(timer)
      }, 0);


    },



    handleScroll () {

      this.$nextTick(() => {

        let now = +new Date()
        if (now - this.previous > 10) {

          this.previous = now
          let scrollY = window.scrollY;

          for (let i = 0; i < this.topList.length; i++) {

            if ((scrollY + 10 > this.topList[i]) && (scrollY + 10 < this.topList[i + 1])) {

              if ((scrollY + window.innerHeight + 2) < document.documentElement.scrollHeight) {

                this.activeKey = i

              }
              break

            }

          }
          // if (t < 50) {
          //   this.activeKey = 0
          // }
        }

      })



    },
    jump (item) {

      this.$router.push({
        name: 'HousekeepingDetail',
        query: {
          id: item.service_id,

        }
      })
    }

  },
  beforeDestroy () {

    window.document.removeEventListener("scroll", this.handleScroll)
  }
}
</script>
<style lang='less' scoped>
/deep/.van-sidebar-item__text {
  display: flex;
  white-space: nowrap;
  -webkit-white-space: nowrap;
  text-align: center;
  padding-left: 10px;
}
.bg {
  display: flex;
  background: white;
}
.tab {
  height: 100%;
  position: fixed;
  top: 0;

  display: flex;
  flex-direction: column;

  background: #f1f1f1;
}
/deep/ .van-sidebar-item {
  background: #f1f1f1;
  padding-left: 0;
  padding-right: 0;
}
/deep/ .van-sidebar-item--select {
  background: #fff;

  &::before {
    background: #ff7733;
  }
  .van-sidebar-item__text {
    color: #ff7733;
  }
}
.content {
  flex: 1;
  margin-left: 80px;
  padding-bottom: 30px;
}
.box {
  width: 100%;

  background: #ffffff;

  padding: 12px;
  box-sizing: border-box;
  padding-bottom: 0;
  .detail {
    display: flex;
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 12px;
    margin-top: 12px;
    .img {
      /deep/.van-image {
        width: 100px;
        height: 80px;
      }
    }
    .right {
      flex: 1;
      margin-left: 10px;
      display: flex;
      justify-content: space-between;
      flex-direction: column;

      p {
        margin: 0;
        font-size: 14px;
        color: #303030;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden; //溢出内容隐藏
        text-overflow: ellipsis; //文本溢出部分用省略号表示
        display: -webkit-box; //特别显示模式
        -webkit-line-clamp: 2; //行数
        line-clamp: 2;
        -webkit-box-orient: vertical; //盒子中内容竖直排列
      }
      .bottom {
        display: flex;
        justify-content: space-between;
        .num {
          font-size: 12px;

          color: rgba(32, 35, 39, 0.6);
        }
        .price {
          font-size: 14px;

          color: #ff7733;
        }
      }
    }
  }
  h3 {
    font-size: 14px;
    font-weight: bold;
    color: #202327;
    margin: 0;
  }
}
.distance {
  font-size: 12px;

  font-weight: 400;
  color: rgba(32, 35, 39, 0.6);
}
</style>